<template>
  <div>
    <div class="approval-flow__header">
      <el-button size="mini" type="primary" @click="$router.push('/workflows')">跳转创建</el-button>
      <el-button size="mini" type="primary" @click="handleOpenDialog">发布</el-button>
    </div>
    <div class="approval-flow">
      <NodeWrap ref="nodeWrapRef" :node-list.sync="list" />
      <el-dialog
        :visible.sync="show"
        title="创建审批流"
        width="350px"
      >
        <el-form ref="elFormRef" :model="formData" :rules="rules">

          <el-form-item prop="workFlowName" label="审批流名称">
            <el-input v-model="formData.workFlowName" placeholder="请输入审批流名称" />
          </el-form-item>

          <el-form-item prop="desc" label="审批流介绍">
            <el-input v-model="formData.desc" placeholder="请输入审批流名称" type="textarea" />
          </el-form-item>

        </el-form>
        <template #footer>
          <span>
            <el-button @click="handleCloseDialog">取消</el-button>
            <el-button type="primary" @click="handleCreateFlow">确定</el-button>
          </span>
        </template>

      </el-dialog>
    </div>
  </div>

</template>
<script>

import NodeWrap from '@/views/approvalFlow/components/nodeWrap.vue'
import { createApprovalFlow } from '@/api/approvalFlow'
export default {
  name: 'ApprovalFlow',
  components: {
    NodeWrap
  },
  data() {
    return {
      list: [],
      show: false,
      formData: {
        workFlowName: '',
        desc: ''
      },
      rules: {
        workFlowName: [
          { required: true, message: '请填写审批流名称', trigger: ['change', 'blur'] }
        ],
        desc: [
          { required: true, message: '请填写审批流介绍', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    handleOpenDialog() {
      if (!this.checkEvent()) return
      this.show = true
      this.$nextTick(() => {
        this.$refs.elFormRef.clearValidate()
      })
    },
    async createApprovalFlowApi(data) {
      try {
        const res = await createApprovalFlow(data)
        if (res.code === 200 || res.code === 201) {
          this.$message.success('创建成功')
          this.show = false
          this.reset()
          this.list = []
        }
      } catch (error) {
        this.$message.error(error.message || '创建失败')
      }
    },

    checkEvent() {
      if (this.list.length <= 0) {
        this.$message.error('请添加审批人')
        return false
      }
      const errorNum = this.$refs.nodeWrapRef.errorNum
      if (errorNum > 0) {
        this.$message.error(`发布失败，您还有${errorNum}处信息未填写完整`)
        return false
      }
      return true
    },

    reset() {
      this.formData = this.$options.data().formData
    },

    handleCreateFlow() {
      this.$refs.elFormRef.validate((valid) => {
        if (valid) {
          this.createApprovalFlowApi(this.formatData(this.formData))
        }
      })
    },
    formatData(data) {
      const list = this.list.map(item => {
        const newObj = Object.assign({}, item)
        delete newObj.error
        return newObj
      })

      return {
        ...data,
        nodes: JSON.stringify(list)
      }
    },
    handleCloseDialog() {
      this.reset()
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
.approval-flow {
  padding: 20px;
}
.approval-flow__header {
  display: flex;
  justify-content: flex-end;
  padding: 7px 30px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
